<template>
	<div class="poster">
		<list-title :data="header"></list-title>
		<el-form :model="sendAuctionForm" :rules="rules" ref="sendAuctionForm" label-width="200px">
			<el-form-item label="所属鉴品分类" prop="parentid">
				<el-select v-model="catid" filterable placeholder="请选择鉴品分类" style="width: 334px">
					<el-option label="请选择鉴品分类" value="0"></el-option>
					<el-option v-for="(item, index) in categoryList" 
					:key="index" 
					:label="item.name" 
					:value="item.catid"
					:disabled="false">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="选择鉴品" prop="goods_id">
				<el-select
				v-model="sendAuctionForm.data.goods_name"
				filterable
				remote
				placeholder="请输入关键词"
				:remote-method="getGoodsList"
				:loading="loading"
				@change="chooseGoods">
					<el-option
					v-for="item in goodsList"
					:key="item.goods_id"
					:label="item.goods_name"
					:value="item.goods_id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="拍卖行" prop="data.name" style="width: 600px;">
				<el-input v-model="sendAuctionForm.data.name" placeholder="拍卖行"></el-input>
			</el-form-item>
			<el-form-item label="送拍时间" prop="data.send_time" style="width: 600px;">
				<el-date-picker
				v-model="sendAuctionForm.data.send_time"
				format="yyyy-MM-dd HH:mm:ss"
				value-format="yyyy-MM-dd HH:mm:ss"
				type="datetime"
				placeholder="选择日期时间">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('sendAuctionForm')" :disabled='sendAuctionForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='sendAuctionForm.submitLock'></span>
				</el-button>
				<el-button @click="resetForm('sendAuctionForm')" v-if='sendAuctionForm.data.id==0'>重 置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"

export default {
	inject: ['reload'],
	data() {
		return {
			/*头部数据*/
			header: {
				title: '添加送拍',
				reload: false,
				buttons: [
					{
						title: '送拍列表',
						type: 'primary',
						pathName: 'pc/epi/pj8/SendAuctionList'
					}
				]
			},
			catid: '0',
			keyword: '',
			categoryList: [],//所有栏目，便于选择
			goodsList: [],
			/*字段数据*/
			sendAuctionForm: {
				submitLock: false,
				parentid: '',//选择的栏目ID
				data: {
					id: 0,
					member_id: 0,
					goods_id: '',
					goods_name: '',
					name: '',
					send_time: '',
				}
			},
			rules: {
				data: {
					goods_id: [
						{ required: true, message: '请选择鉴品', trigger: 'change' }
					],
					name: [
						{ required: true, message: '请输入拍卖行', trigger: 'blur' },
						{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
					],
					send_time: [
						{ required: true, message: '请输入送拍时间', trigger: 'blur' }
					]
				}
			},
			loading: false,
		};
	},
	components: {
		ListTitle,
	},
	created: function() {
		/*取出分类列表*/
		this.getGoodsCategoryList()

		/*如果是修改，取出旧数据*/
		if(this.$route.query.id){
			this.getSendAuction(this.$route.query.id)
		}
	},
	methods: {
		/*获取栏目*/
		getGoodsCategoryList: function(){
			if(this.$api.goodsCategoryList != undefined){
				this.$get(this.$api.goodsCategoryList).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.categoryList = []
							Object.keys(res.data.data).forEach((k) => {
								let indent = '';
								for(var i=1; i<res.data.data[k].level; i++){
									if(i == 1){
										indent += '|---';
									}else{
										indent += '---';
									}
								}
								this.categoryList.push ({
									catid: res.data.data[k].catid,
									name: indent + res.data.data[k].name
								});
								/*添加默认的分类，此分类不能删*/
								if(this.$route.query.catid == res.data.data[k].catid){
									this.goodsForm.data.catids.push(
										{
											'catid': res.data.data[k].catid,
											'name': res.data.data[k].name,
										}
									)
								}
							})
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*获取内容列表*/
		getGoodsList: function(query){
			if(this.catid === '0'){
				this.$message({
					showClose: true,
					message: '请选择鉴品分类',
					type: 'error'
				});
			}
			if(this.$api.goodsList != undefined){
				this.$get(this.$api.goodsList, {
					catid: this.catid,
					pagesize: 100,
					name: query
				}).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data.list != undefined && res.data.data.list.length > 0){
							// console.log(res.data.data.list, 111);
							this.goodsList = []
							Object.keys(res.data.data.list).forEach((k) => {
								// console.log(res.data.data.list[k].goods_id)
								this.goodsList.push (
									{
										goods_id: res.data.data.list[k].goods_id,
										goods_name: res.data.data.list[k].name,
										member_id: res.data.data.list[k].order.member_id,
									}
								);
							})
							// console.log(this.sendAuctionForm.data, 1)
						}
					}
				})
				.catch(err => {})
				.finally(() => {
					this.tableLoading = false
				}) 
			}else{
				this.$message({
					showClose: true,
					message: '没有内容列表的权限',
					type: 'error'
				});
			}
		},
		/*取出需要修改的数据*/
		getSendAuction: function(){
			this.header.title = '编辑送拍'
			/*取出需要修改的数据*/
			this.sendAuctionForm.submitLock = true;
			this.$get(this.$api.modifySendAuction, {
				'id': this.$route.query.id
			}).then(res => {
				if(res.data.code == 0){
					// console.log(res.data.data)
					this.sendAuctionForm.data.id = res.data.data.id
					this.sendAuctionForm.data.member_id = res.data.data.member_id
					this.sendAuctionForm.data.goods_id = res.data.data.goods_id
					this.sendAuctionForm.data.goods_name = res.data.data.goods_name
					this.sendAuctionForm.data.name = res.data.data.name
					this.sendAuctionForm.data.send_time = res.data.data.send_time

					/*取单个商品*/
					this.getContent(res.data.data.goods_id);
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
				this.sendAuctionForm.submitLock = false;
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*取单个商品，为了修改展示*/
		getContent: function(goods_id){
			if(this.$api.modifyGoods != undefined){	
				/*取出需要修改的数据*/
				this.$get(this.$api.modifyGoods, {
					'id': goods_id
				}).then(res => {
					if(res.data.code == 0){
						// console.log(res.data.data.goods.catid)
						// this.catid = res.data.data.goods.catid
						this.goodsList.push (
							{
								goods_id: res.data.data.goods.goods_id,
								goods_name: res.data.data.goods.name
							}
						);
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.sendAuctionForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// console.log(this.sendAuctionForm.data)
						// return
						this.sendAuctionForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addSendAuction//默认是添加
						if(this.sendAuctionForm.data.id > 0){//修改
							apiUrl = this.$api.modifySendAuction
						}
						/*添加菜单*/
						let data = JSON.parse(JSON.stringify(this.sendAuctionForm.data))

						this.$post(apiUrl, {
							SendAuction: data,
						}).then(res => {
							// console.log(res);
							/*成功*/
							if(res.data.code == 0){
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'success'
								});
								if(this.sendAuctionForm.data.id > 0){
									this.$router.go(-1)	
								}else{
									this.$refs[formName].resetFields();
								}
							}else{
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'error'
								});
							}
							this.sendAuctionForm.submitLock = false;
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*重置表单*/
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		/*选择鉴品*/
		chooseGoods: function(val){
			// console.log(val)
			console.log(this.sendAuctionForm.data, 2)
			let index = 0;
			for(let i=0; i<this.goodsList.length; i++){
				if(this.goodsList[i].goods_id == val){
					index = i;
				}
			}
			if(index !== ''){
				// console.log(index)
				this.sendAuctionForm.data.goods_id = this.sendAuctionForm.data.goods_id|this.goodsList[index].goods_id
				this.sendAuctionForm.data.goods_name = this.goodsList[index].goods_name
				this.sendAuctionForm.data.member_id = this.sendAuctionForm.data.member_id|this.goodsList[index].member_id
				// console.log(this.sendAuctionForm.data.goods_name)
			}
			// console.log(this.sendAuctionForm.data, 132)
		}
	},
    computed: {
    	
    }
};
</script>

<style lang="stylus" scoped>
.poster
	form
		margin-top: 10px
</style>